<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/js/jquery-3.0.0.min.js}">
    <link rel="stylesheet" th:href="@{/layer/layer.js}">
    <link rel="stylesheet" th:href="@{/layui/layui.all.js}">
    <link rel="stylesheet" th:href="@{/layui/layui.js}">
</head>
<body class="layui-layout-body" style="background-color: #AADFFD">
<div class="layui-layout layui-layout-admin" style="margin:auto;width:80%;height: 800px;background: white;" >
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px; background-color: #f9f9f9;">
            <div style="padding: 20px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6" style="width:100%">
                        <div class="layui-card" style="width: 100%;height: 70px;">
                            <p><span style="font-size: 25px;font-weight: bold;position: relative;left: 50%;margin-left: -54px" th:text="${novel.bookname}"></span></p>
                            <p><span style="font-size: 16px;margin-left:-48px;position: relative;left: 50%;top: 34px;" th:text="'作者:'+${novel.user.username}"></span></p>
                            <div class="layui-input-block" style="margin-left: 850px;position: relative;top: -12%;left: 6% ">
                                <button type="button" class="layui-btn layui-btn-radius" style="width: 100px;" th:if="${a eq '1'}"><a th:href="@{/novel/addBookShelf(novelId=${novelId},c='3')}" >已加入书架</a></button>
                                <button type="button" class="layui-btn layui-btn-radius" style="width: 100px;" th:if="${a != '1'}"><a th:href="@{/novel/addBookShelf(novelId=${novelId},c='3')}" >加入书架</a></button>
                                <button type="button" class="layui-btn layui-btn-radius" style="width: 100px;"><a th:href="@{/novel/novelDetails(novelId=${novelId})}">返回详情页</a></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height:600px;border:solid 1px black;position: relative;">


                <div style="width:200px;height: 200px;float: left;position: relative;left: 10%">
                    <table class="layui-table" lay-even="" lay-skin="nob" style="width: 200px;">
                        <colgroup>
                            <col width="400">
                            <col width="200">
                            <col>
                        </colgroup>
                        <div style="position: absolute">
                            <tr th:each="item,userStat:${chapters}" style="float: left;position: absolute;">
                                <div style="position: relative;left: 60%;top: 5%;"><a th:href="@{/novel/startRead(chapterId=${item.chapterid},novelId=${item.bookid},sta=1)}" style="color: black;TEXT-DECORATION:none;" th:text="${(userStat.index+1)%4 eq 1 ? item.chaptername:''}"></a></div>
                            </tr>
                        </div>
                    </table>
                </div>
                <div style="width:200px;height: 200px;float: left;position: relative;left: 10%">
                    <table class="layui-table" lay-even="" lay-skin="nob" style="width: 200px;">
                        <colgroup>
                            <col width="400">
                            <col width="200">
                            <col>
                        </colgroup>
                        <div style="position: absolute">
                            <tr th:each="item,userStat:${chapters}" style="float: left;position: absolute;">
                                <div style="position: relative;left: 60%;top: 5%;"><a th:href="@{/novel/startRead(chapterId=${item.chapterid},novelId=${item.bookid},sta=1)}" style="color: black;TEXT-DECORATION:none;" th:text="${(userStat.index+1)%4 eq 2 ? item.chaptername:''}"></a></div>
                            </tr>
                        </div>
                    </table>
                </div>
                <div style="width:200px;height: 200px;float: left;position: relative;left: 10%">
                    <table class="layui-table" lay-even="" lay-skin="nob" style="width: 200px;">
                        <colgroup>
                            <col width="400">
                            <col width="200">
                            <col>
                        </colgroup>
                        <div style="position: absolute">
                            <tr th:each="item,userStat:${chapters}" style="float: left;position: absolute;">
                                <div style="position: relative;left: 60%;top: 5%;"><a th:href="@{/novel/startRead(chapterId=${item.chapterid},novelId=${item.bookid},sta=1)}" style="color: black;TEXT-DECORATION:none;" th:text="${(userStat.index+1)%4 eq 3 ? item.chaptername:''}"></a></div>
                            </tr>
                        </div>
                    </table>
                </div>
                <div style="width:200px;height: 200px;float: left;position: relative;left: 10%">
                    <table class="layui-table" lay-even="" lay-skin="nob" style="width: 200px;">
                        <colgroup>
                            <col width="400">
                            <col width="200">
                            <col>
                        </colgroup>
                        <div style="position: absolute">
                            <tr th:each="item,userStat:${chapters}" style="float: left;position: absolute;">
                                <div style="position: relative;left: 60%;top: 5%;"><a th:href="@{/novel/startRead(chapterId=${item.chapterid},novelId=${item.bookid},sta=1)}" style="color: black;TEXT-DECORATION:none;" th:text="${(userStat.index+1)%4 eq 0 ? item.chaptername:''}"></a></div>
                            </tr>
                        </div>
                    </table>
                </div>




        </div>
    </div>

</div>
<script src="/bbs/layui/layui.all.js"></script>
<script type="text/javascript" src="/bbs/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="/bbs/layer/layer.js"></script>
<script type="text/javascript">

</script>
<script>
    layui.use('element', function(){
        var element = layui.element;
    });

</script>

</body>
</html>